html {
	height: 100%;
}

body {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

header {
	flex: 0 0 auto;
}

footer {
	flex: 0 0 auto;
}

.main-content {
	flex: 1 0 auto;
}

.footer-content {
	height: 35px;
	text-align: center;
	color: rgba(127, 127, 127, 0.8);
	font-weight: normal;
	font-size: 0.875em;
}

.my-navbar {
	height: 66px;
}

.avatar {
	margin-top: 1%;
	margin-right: -12%;
}

.button-start {
	margin-top: 13%;
	width: 25%;
	height: 50px;
	background: rgba(0, 0, 0, 0.9);
	border: 1px solid grey;
	border-radius: 25px;
	outline: none;
	cursor: pointer;
	font: inherit;
	color: white;
	transition: all 1s;
	text-align: center;
}

.button-start:hover {
	background-color: transparent;
	color: black;
}

.center-button {
	text-align: center;
}

/*问题页面*/
.slide-container {
	margin-top: 10%;
	text-align: center;
}

@media screen and (max-width: 980px) {
	body {
		overflow-y:auto
	}
	/*开始首页*/
	.logo {
		margin-top: 18%;
		margin-left: 4%;
	}
	nav {
		height: 120px;
	}
	.avatar {
		margin-top: 4%;
		margin-right: -23%;
	}
	h1 {
		text-align: center;
		font-size: 5em;
		margin-top: 3%;
	}
	h2 {
		text-align: center;
		font-size: 4em;
		margin-top: 5%;
	}
	strong {
		font-size: 1.5em;
	}
	.button-start {
		margin-top: 20%;
		width: 65%;
		height: 100px;
		font-size: 2.5em;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 100px;
	}
	.footer-content {
		font-size: 2em;
	}

	/*问题页面*/
	.slide-container {
		width: 800px;
		margin-top: 20%;
		font-size: 2.8em;
	}
	.answers {
		margin-top: 20px;
		list-style: none;
		text-align: left;
	}
	.answers li {
		cursor: pointer;
		padding: 5px 30px;
		margin: 12px 0;
		color: #4c4c4c;
	}
	 /* .answers li:hover {
		background-color: rgba(0, 0, 0, 0.8);
		color: white;
		border: rgba(127, 127, 127, 0.8);
		border-radius: 35px;
	} */
	li.updata {
		background-color: #8080ff;
		color: white;
		border: rgba(127, 127, 127, 0.8);
		border-radius: 35px;
	}
	.left-arrow {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.question {
		text-align: left;
	}
	.question-number {
		position: relative;
		display: inline-block;
		color: white;
		width: 15%;
	}
	.question-number:before {
		content: ''; /* 用伪元素来生成一个矩形 */
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background: black;
		transform: skew(-45deg);
	}
	#arrow {
		margin-top: 0px;
	}

	/*结果页面*/
	.button-result {
		margin-top: 50px;
		width: 120px;
		height: 120px;
		outline: none;
		cursor: pointer;
		background-color: green;
		color: black;
		border-radius: 50%;
		font-size: 2em;
	}
	.button-wrong {
		margin-top: 50px;
		width: 120px;
		height: 120px;
		outline: none;
		cursor: pointer;
		background-color: #8B0000;
		color: white;
		border-radius: 50%;
		font-size: 2em;
	}
	.popover {
		font-size: 3em;
		max-width: 2000px;
	}
	#show-score {
		margin-top: 200px;
		font-size: 3em;
	}
	#cir-answer {
		text-align: center;
	}
}